<!--
 * @Description: FRM题库列表页 -- frmQuestionbank
 * @Author: your name
 * @Date: 2024-01-04
 * @LastEditTime: 2024-01-04
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="heart_w" style="display: flex">
      <div class="questionbank">
        <div class="listBox">
          <div class="item" v-for="item in chapterData" :key="item.tid">
            <div class="section" @click="clickContent(item, item.cid)">
              <div class="left_t">
                <img src="@/assets/images/tip.png" alt="" />
                <p>{{ item.name }}</p>
              </div>
              <div class="commonRight">
                <span>总题数：{{ item.t_num }}道</span>
                <!-- <span class="correct">0%</span>
                <span class="gray">共69</span> -->
              </div>
            </div>

            <div class="innerChilds">
              <div
                class="testPaper section"
                v-for="item_t in qusetionbankList"
                :key="item_t.cid"
                v-show="item.item_val"
              >
                <div class="left_t">
                  <!-- <img src="" alt="" /> -->
                  <p>
                    {{ item_t.name }}
                  </p>
                </div>
                <div class="commonRight">
                  <span>总题数: {{ item_t.t_num }}道</span>
                  <!-- <span class="correct">0%</span>
                  <span class="gray">共69</span> -->
                  <el-button
                    round
                    size="mini"
                    @click="startExercise(item_t.cid, item_t.report_id, 1)"
                    v-if="item_t.status == 1"
                  >
                    开始做题
                  </el-button>
                  <el-button
                    round
                    size="mini"
                    v-if="item_t.status == 2"
                    @click="Continuetest(item_t.cid, item_t.report_id, 2)"
                  >
                    继续做题
                  </el-button>
                  <el-button
                    round
                    size="mini"
                    v-if="item_t.status == 3"
                    @click="toreport(item_t.report_id)"
                  >
                    查看报告
                  </el-button>
                  <el-button
                    round
                    size="mini"
                    v-if="item_t.status == 4"
                    @click="hoveNot(item_t.status)"
                  >
                    未购买
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧导航栏 -->
      <div class="iconlist">
        <router-link to="/exam_practice/errorList">
          <i></i>
          <p>错题集</p>
        </router-link>
        <router-link to="/exam_practice/collectList">
          <i></i>
          <p>收藏夹</p>
        </router-link>
        <a href="javascript:void(0);">
          <i></i>
          <p>模拟考试</p>
        </a>
        <router-link to="/exam_practice/smartTest">
          <i></i>
          <p>智能组卷</p>
        </router-link>
        <a href="javascript:void(0);">
          <i></i>
          <p>返回</p>
        </a>
      </div>
    </div>

    <!-- Dialog 做题模式 -->
    <el-dialog
      title="请选择做题模式"
      :visible.sync="centerDialogVisible"
      width="32%"
      center
    >
      <div class="clearBox">
        <a href="javascript:void(0);" @click="frm_question(1)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/lianximoshi.1eabfc1.png"
          >
          </el-image>
          <h6>练习模式</h6>
          <p>解题思路随时查看</p>
        </a>
        <!-- <router-link to="/exam_practice/FRM" tag="a">
            </router-link> -->
        <a href="javascript:void(0);" @click="frm_question(2, cont_id)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/ceshimoshi.764e30d.png"
          ></el-image>
          <h6>背题模式</h6>
          <p>答案解析一网打尽</p>
        </a>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getQusetionbank, getchapterList } from '@/api/FRM.js'
export default {
  name: 'frmQuestionbank',
  data() {
    return {
      cid: this.$route.query.cid, //
      qusetionbankList: [], // 二级
      chapterData: [], // 一级
      centerDialogVisible: false,
      report_id: 0,
      donum: 0, // cid
      type: 1,
      cont_id: ''
    }
  },
  created() {
    this.frmListPractice()
    localStorage.setItem('frmcid', this.$route.query.cid)
  },
  methods: {
    clickContent(el, id) {
      if (el.item_val == false) {
        this._itemsinit(id)
      }
      el.item_val = !el.item_val
    },
    async _itemsinit(cid) {
      const dataCache = new Map()
      let key = 'wares'
      // 手风琴模式
      this.chapterData.forEach((el, index) => {
        el.item_val = false
      })
      this.qusetionbankList = dataCache.get(key)
      const data_list = {
        cid: cid,
        token: this.$store.state.token
      }
      const { data: data } = await getQusetionbank(data_list)
      if (data.code == 1 && !this.qusetionbankList) {
        dataCache.set(key, data.data.list)
        this.qusetionbankList = dataCache.get(key)
        // console.log(dataCache.get(key), '666666')
        return data.data.list
      } else {
        this.$message.error(data.msg)
      }
    },
    // 开始做题 type 1
    startExercise(cid, id, type) {
      this.donum = cid
      this.report_id = id
      this.type = type
      this.centerDialogVisible = true
    },
    // 继续做题 type 2
    Continuetest(cid, id, type) {
      this.donum = cid
      this.report_id = id
      this.type = type
      this.cont_id = 1
      this.centerDialogVisible = true
    },
    toreport(id) {
      this.$router.push({
        path: '/exam_practice/FRM/frmReport',
        query: {
          id
        }
      })
    },
    hoveNot(status) {
      if (status == 4) {
        this.$message('暂未购买课程')
      }
    },
    frm_question(model_id, cont_id) {
      if (this.type === 1) {
        // 开始做题/开始背题
        this.$router.push({
          path: '/exam_practice/FRM',
          query: {
            cid: this.donum,
            type: 1, // 开始做题1 继续做题2
            free_look: this.report_id,
            model: model_id,
            cid_t: this.cid // 列表参数 // FRM题型 I II
          }
        })
      } else {
        // 继续做题/继续背题
        this.$router.push({
          path: '/exam_practice/FRM',
          query: {
            cid: this.donum,
            type: cont_id === 1 ? 1 : 2, // 开始做题1 继续做题2
            free_look: this.report_id,
            model: model_id,
            cid_t: this.cid // 列表参数 // FRM题型 I II
          }
        })
      }
    },

    async frmListPractice() {
      const dataCache = new Map()
      let key = 'wares'
      let _that = this
      _that.chapterData = dataCache.get(key)

      let list_params = {
        cid: _that.cid || localStorage.getItem('frmcid'),
        token: _that.$store.state.token
      }
      const { data: data } = await getchapterList(list_params)
      console.log('题库列表一级', data.data.list)
      if (data.code == 1 && !_that.chapterData) {
        const list = data.data.list.map((ele, index) => {
          if (ele.item_val) {
            ele.item_val = ele.item_val
          } else {
            ele.item_val = false
          }
          return ele
        })
        dataCache.set(key, list)
        _that.chapterData = dataCache.get(key)
        // console.log(_that.chapterData, '0000000000', dataCache.get(key))
        return list
      } else {
        this.$message.error(data.msg)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/frm_cfa.scss';
</style>
